<template>
  <div class="search-song-Lists">
    <content-list :contentList="albumDatas"></content-list>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import ContentList from '../ContentList'
  import axios from 'axios'
  export default {
    name: 'search-singers',
    data () {
      return {
        albumDatas: []
      }
    },
    computed: {
      ...mapGetters([
        'searchword'
      ])
    },
    watch: {
      searchword: function () {
        this.getSearchSingers()
      }
    },
    components: {
      ContentList
    },
    mounted: function () {
      this.getSearchSingers()
    },
    methods: {

      getSearchSingers() {
        if (this.searchword){
          axios.get(this.$store.state.HOST + "/singer/search/Singers?name=" + this.searchword)
            .then(resp=> {
              this.albumDatas = resp.data
            }).catch(()=>{
            this.albumDatas = []
          })
        }
      }
    }
  }
</script>

<style scoped>
  .search-song-Lists{
    min-height: 300px;
    margin-top: 50px;
  }
</style>
